Script Effects

Make your Web pages come alive with Script Effects. These are ready-made JavaScript effects which can be triggered by a Web page or by individual cells and image maps within the page. No coding is required, since PhotoImpact does it for you.

To add a Script Effect, first create an image map (using the Image Map Tool) or slice a document into cells (using the Slice Tool). Then select the image map, image cell, or HTML text cell with the Pick Tool on the Attribute Toolbar and apply one of the following commands:

Blink Text Flashes text in an assortment of colors. (Only for HTML text cells)

Highlight Text Highlights the characters within the text one at a time, from left to right or vice versa. (Only for HTML text cells)

Pop-up Menu Inserts a selection menu. You can add items in the menu and assign each item with a hyperlink. (Only for image maps and image cells)

Rainbow Text Displays text in a spectrum of rainbow colors or applies a gradient fill to the text. (Only for HTML text cells)

Rollover Text Sets the behavior of text during a mouse event. For example, you can display the text in blue during mouseover and red during mousedown. (Only for HTML text cells)

Vertical Scroll Applies a scrolling marquee effect to text or images. It scrolls up multiple lines of text or a series of images in a repeated, endless cycle. (Only for image and HTML text cells)

Status Bar Message Displays messages in the Status Bar of the Web browser. You can specify a different message to display for each type of mouse event. (Only for image maps and image cells)

Swap Image Pops up an image during a specified mouse event, such as mouseover or mouse click on an image map or sliced cell. It replaces the original content of a selected cell with the new image. (Only for image maps and image cells)


Swap Image dialog box

Pops up an image during a specified mouse event, such as a mouseover or mouse click on an image map or sliced cell. It replaces the original content of a selected cell with the new image.

Note: Even if you are applying this effect to an image map, you still need to slice your document into cells using the Slice Tool (since you need to choose an image cell on which to display the new image).

Event Select one or more mouse events that will trigger the effect.

Display effect on event: (mouse event) Applies the effect during the selected mouse event.

Cell to display swap effect Select the cell whose contents will be replaced.

Zoom In Increases the magnification in the preview window so you can choose the color more accurately.

Zoom Out Reduces the magnification in the preview window so you can see more of the image.

Original Image Resizes the image so that it appears at its regular size.

Fit in Window Resizes the image to the largest size that will entirely fit in the preview window.

Swap image Select the image that will replace the cell’s content.

Browse for file Locates the swap image file.

Resize image to fit cell Resizes the swap image to match the cell's size.

Restore after rollover Restores the original image after the mouse event.


Status Bar Message dialog box

Enables message display with custom effects in the browser’s Status Bar (lower left side) during a specified mouse event. (only for image maps and image cells)

Event Select one or more mouse events that will trigger the effect.

Display effect on event: (mouse event) Applies the effect during the selected mouse event.

Message Enter your custom message in the text box provided.

Type Select message display type. You can choose from the following:

Normal Each character appears one by one to form the text message.

Shrink scrolling Each character crawls to the left to form the text message.

Marquee Message crawls from right to left.

Repeat Select to display the message continuously.


Blink Text dialog box

Flashes text in an assortment of colors. (only for HTML text cells)

Text color Click to open the Ulead Color Picker, or right-click to open a menu of other color selecting tools to choose a color for the blinking text.

Hex equivalent Displays the hexadecimal value of a selected color.

Add Places the selected color on the color list. You can choose and add one or more colors for the blinking text.

Delete Removes the selected color from the color list.

Update Changes the color of a selected item on the list.

Up Moves up the selected item.

Down Moves down the selected item.

Delay time Specify the amount of time that elapses in between blinks.


Rollover Text dialog box

Sets the behavior of text during a mouse event. For example, you can display the text in blue during a mouseover and red during mousedown.

Event Select one or more mouse events that will trigger the effect.

Display effect onMouseOver event (selected mouse event) Applies the effect during the selected mouse event.

Text settings Adjust text attributes to achieve your preferred text appearance.

Restore after rollover Puts text condition back to its original state after a mouse event.


Rainbow Text dialog box

Standard spectrum Applies a spectrum of rainbow colors from red to purple.

Reverse standard spectrum Applies a spectrum of rainbow colors from purple to red.

From __ to Applies a gradient fill to the text using the specified start and end colors.


Highlight Text dialog box

Text settings Adjust text attributes to achieve your preferred text appearance.

Direction Determines direction of the effect – whether left to right, or right to left.

Auto-reverse Enables highlight effect to alternately move from left to right then right to left.

Delay time Specify the amount of time that elapses in between highlights.


Vertical Scroll dialog box - Text
Vertical Scroll dialog box
 Scroll text	 Scroll image

Vertical Scroll is a scrolling marquee effect that displays multiple lines of text or a series of images in the same cell on a rotation basis. Each line of text or image in the sequence can be assigned a different hyperlink, which will be active whenever displayed.

Type Choose between Text and Image.

Text Enter a line of text.

URL Enter the URL address of the Web page that will be displayed when the user clicks a line of text.

Remote URL Opens the default Web browser to search the Internet for the Web page to link to.

Local file Click to search for an HTML file in your local folders.

Target Specify the frame in which the linked Web page will open.

Text settings Adjust text attributes such as Font, Size, and Text Color.

Add Places new text on the sequence list.

Remove Removes selected text from the sequence list.

Update Applies current settings to a selected text on the sequence list.

Up Moves up the selected item.

Down Moves down the selected item.

Speed Specify the scroll rate. A higher value means a faster rate.

Delay Specify the amount of time that elapses before scrolling repeats.

Expand and shrink Continuously expands and contracts the text while scrolling.

Pause on mouseover Pauses scrolling when mouse is moved across the text.


Vertical Scroll dialog box - Image
Vertical Scroll dialog box
 Scroll text	  Scroll image

Vertical Scroll is a scrolling marquee effect that displays multiple lines of text or a series of images in the same cell on a rotation basis. Each line of text or image in the sequence can be assigned a different hyperlink, which will be active whenever displayed.

Type Choose between Scroll text and Scroll image.

Image Specify the file name and path of the image you want to include in the scrolling marquee. Click Browse to locate the file.

URL Enter the URL address of the Web page that will be displayed when the user clicks an image.

Remote URL Opens the default Web browser to search the Internet for the Web page to link to.

Local file Click to search for an HTML file in your local folders.

Target Specify the frame in which the linked Web page will open.

Alt text Assign the text to be displayed when the pointer is over an image.

Add Places new image on the sequence list.

Remove Removes selected image from the sequence list.

Update Applies current settings to a selected image on the sequence list.

Up Moves up the selected item.

Down Moves down the selected item.

Speed Specify the scroll rate. A higher value means a faster rate.

Delay Specifies the delay rate after the text has finished scrolling and before it repeats the marquee.

Pause on mouseover Enables effect pause while mouse is over the text.


Pop-up Menu dialog box

Inserts a selection menu. You can add items in the menu and assign each item with a hyperlink. This applies only to image maps and image cells.

Text Type the item that will be listed in pop-up menu.

Target Specify the frame where the linked Web page will open.

URL Specify the URL address of the Web page that will be opened when a menu item is selected.

Alt text Assign the text to be displayed when the pointer is over the menu item.

Status bar Assign the Status Bar message to be displayed when the pointer is over the item.

Add Places new item on the menu list.

Remove Removes selected item from the menu list.

Update Applies current settings to a selected item on the menu list.

Up Moves up the selected item.

Down Moves down the selected item.

Menu item/Hyperlink Displays a list of the menu items and their respective hyperlinks.

Text settings Adjust text attributes such as Font, Size, and Format.

Position Specify where to insert the pop-up menu. By default, the pop-up menu is placed on the left, topmost corner of a selected cell or an image map's bounding area (Left=0, Top=0). When specifying the left and top coordinates, make sure that the values do not exceed the width and height of the cell or image map’s bounding area.

Normal Choose the background and text colors at normal state.

Background/Text color Click to open the Ulead Color Picker, or right-click to open a menu of other color selecting tools.

Mouseover Choose the background and text colors on mouseover events.

Background/Text color Click to open the Ulead Color Picker, or right-click to open a menu of other color selecting tools.


Swapping an image on your Web page

Swap Image Script Effect allows part of an image to change during a mouse event such as mouseover or mousedown. It will replace the original content of a cell with a new image.

1.	Create or open a document on the workspace.

2.	Using the Slice Tool, first of all, choose a slice method you want to use from the Attribute Toolbar and then slice the document into cells.

3.	Use the Pick Tool in the Attribute Toolbar to select the desired cell on which to apply mouse events. Then click the Script Effects Tab in the Slice Panel and select Triggered by cell.

4.	Click Add Script Effect and select Swap Image from the menu.

5.	In the Swap Image dialog box, choose the mouse event(s) that will trigger the swap effect. For each chosen mouse event, make sure you select Display effect on event.

6.	Choose a cell on which to swap images.

7.	Click Browse for file and choose the second image to swap with the original.

8.	Select Resize image to fit cell to ensure that the second image matches the original image cell's size.

9.	Select Restore after rollover if you want to show again the original image after the mouse event.

10.	Click OK.

11.	Click Preview in Browser to view the results in your default Web browser.

12.	Select File: Save for Web - As HTML to generate the appropriate HTML coding for instant Web use.


Adding blinking text to your Web page

Display your HTML text objects in an assortment of flashing colors using the Script Effects - Blink Text feature.

1.	Create an HTML text object by selecting Web: HTML Text Object. Enter and format your HTML text in the HTML Text Entry dialog box and click OK to add it to your current document.

2.	Assign a particular cell to your HTML text object. Click the Slice Tool in the Tool Panel then select Auto Slice on the Attribute Toolbar. This ensures that the size of your HTML text object matches the size of its cell. If they do not match exactly, Blink Text cannot be activated.

3.	Click the Script Effects Tab in the Slice Panel.

4.	Pick the HTML text object cell and select Triggered by Page.

5.	Click Add Script Effect and choose Blink Text from the drop down list.

6.	In the Blink Text dialog box, select the Text Color box to open the Ulead Color Picker, or right-click to open a menu of other color selecting tools to choose a color for the blinking text. The hexadecimal value of a selected color is displayed.

7.	Click Add to place the selected color on the color list. You can choose and add as many colors as you want for the blinking text. You can also delete or update selected items on the color list.

8.	Specify the time interval between blinks in Delay time.

9.	Click OK.

Tip: You can preview the effect using the File: Preview in Browser command. Blink Text is just one of many ready-made JavaScript effects which you can add to your Web objects under Script Effects Tab. Some of these effects can also be created using the Image Map Tool.